<template>
	<view class="goods_box">
		<view v-for="(item, index) in goodsList" :key="index" @click="gotoDetail(item)">
			<goods-items :item="item" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryObj: {
					query: '',
					cid: '',
					name: '',
					pagenum: 1,
					pagesize: 10
				},
				
				goodsList: [],
				total: 50,
				
				isGetNext: true,  // 节流阀，控制请求次数
			}
		},
		methods: {
			// 赋值
			assign(res) {
				this.goodsList = [...this.goodsList, ...res.goods]
				this.total = res.total
			},
			
			// 获取下一页数据
			getNextPage() {
				this.queryObj.pagenum ++
				this.getGoodsList();
			},
			
			// 获取数据
			async getGoodsList() {
				this.isGetNext = false
				let {data: res} = await uni.$http.get('https://www.escook.cn/api/public/v1/goods/search', this.queryObj)
				res.meta.status !== 200 ? uni.$showMsg : this.assign(res.message);
				this.isGetNext = true
			},
			
			// goods_list 页面触底距离 150px 时触发 onReachBottom 方法
			onReachBottom() {
				// 判断是否有下一页数据
				if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')
				this.isGetNext ? this.getNextPage() : false
			},
			
			// 跳转到详情页面
			gotoDetail(item) {
				console.log(item)
				uni.navigateTo({
					url: '/subpackage/goods_detail/goods_detail?goods_id=' + item.goods_id
				})
			}
		},
		onLoad(options) {
			this.queryObj.query = options.query || '',
			this.queryObj.cid = options.cid || '',
			this.queryObj.name = options.name || ''
			console.log(this.queryObj)
			this.getGoodsList();
		} 
	}
</script>

<style lang="scss">
	.goods_box {
		width: 100%;
		
	}
</style>
